
<template>
  <!-- 账簿维护/业务摘要 页面-->
  <div>

    <cus-allcard :showTitle="false">

      <Tabs :value="tabsValue"
            style="padding-top:16px"
            @on-click="tabsValueChange($event)">
        <Tab-pane label="经费账摘要"
                  name="nameOne">
          <div class="topBody">
            <div class="topBody-span">账簿年份</div>
            <Select v-model="selectModelOne"
                    placeholder="请选择账簿年份"
                    @on-change="selectModelChange(0)"
                    class="topBody-selects">
              <Option v-for="item in cityListOne"
                      :value="item.value"
                      :key="item.value">{{ item.label }}</Option>
            </Select>
            <cus-Button class="mr_10 ml_10"
                        type="primary"
                        @onClick="addAbstractButton"
                        :disabled="selectModelOne==-1||cityListOne.length==1||isjiezhuanOne==1"
                        v-permission="20">添加摘要</cus-Button>
          </div>

          <cusTable border
                 :loading="form.loading"
                 :columns="columnsOne"
                 :data="dataOne"
                 :bottomClass="['cus-page']"
                 :size="vuex_config.tableSize"
                 @on-sort-change="filterChange($event)">

            <template slot-scope="{ row }"
                      slot="isinit">
              <Tag color="success"
                   v-if="row.isinit === '0'">是</Tag>
              <Tag color="error"
                   v-if="row.isinit === '1'">否</Tag>
            </template>

            <template slot-scope="{ row }"
                      slot="isvalid">
              <Tag color="success"
                   v-if="row.isvalid === 1">是</Tag>
              <Tag color="error"
                   v-if="row.isvalid === 0">否</Tag>
            </template>

            <template slot-scope="{ row }"
                      slot="operation">
              <div class="flex">
                <cus-button type="text"
                            size="small"
                            :style="row.isinit=='0'||isjiezhuanOne==1?'pointer-events: none;opacity: 0.2;color:#1E6FFF;padding:0 8px;':'color:#1E6FFF;padding:0 8px;' "
                            v-permission="30"
                            @onClick="tabelEditModelChange(row)">
                  修改
                </cus-button>
                <cus-button type="text"
                            size="small"
                            :style="row.isinit=='0'||isjiezhuanOne==1?'pointer-events: none;opacity: 0.2;color:#FF4746;padding:0 8px;':'color:#FF4746;padding:0 8px;' "
                            v-permission="40"
                            @onClick="tabelDeletModelChange(row)">
                  删除
                </cus-button>
              </div>
            </template>
          </cusTable>
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <cus-page :data="pagesOne"
                      class="mt_10"
                      @pageChange="getAbstractByTypeAndYearApi(0)"></cus-page>
          </div>
        </Tab-pane>
        <Tab-pane label="粮秣账摘要"
                  name="nameTwo">
          <div class="topBody">
            <div class="topBody-span">账簿年份</div>
            <Select v-model="selectModelTwo"
                    placeholder="请选择账簿年份"
                    @on-change="selectModelChange(1)"
                    class="topBody-selects">
              <Option v-for="item in cityListTwo"
                      :value="item.value"
                      :key="item.value">{{ item.label }}</Option>
            </Select>

            <cus-Button class="mr_10 ml_10"
                        type="primary"
                        @onClick="addAbstractButton"
                        :disabled="selectModelTwo==-1||cityListTwo.length==1||isjiezhuanTwo==1"
                        v-permission="20">添加摘要</cus-Button>
          </div>

          <cusTable border
                 :loading="form.loading"
                 :columns="columnsTwo"
                 :data="dataTwo"
                 :bottomClass="['cus-page']"
                 :size="vuex_config.tableSize"
                 @on-sort-change="filterChange($event)">

            <template slot-scope="{ row }"
                      slot="isinit">
              <Tag color="success"
                   v-if="row.isinit === '0'">是</Tag>
              <Tag color="error"
                   v-if="row.isinit === '1'">否</Tag>
            </template>

            <template slot-scope="{ row }"
                      slot="isvalid">
              <Tag color="success"
                   v-if="row.isvalid === 1">是</Tag>
              <Tag color="error"
                   v-if="row.isvalid === 0">否</Tag>
            </template>
            <template slot-scope="{ row }"
                      slot="operation">
              <div class="flex">
                <cus-button type="text"
                            size="small"
                            v-permission="30"
                            :style="row.isinit=='0'||isjiezhuanTwo==1?'pointer-events: none;opacity: 0.2;color:#1E6FFF;padding:0 8px;':'color:#1E6FFF;padding:0 8px;' "
                            @onClick="tabelEditModelChange(row)">
                  修改
                </cus-button>
                <cus-button type="text"
                            size="small"
                            :style="row.isinit=='0'||isjiezhuanTwo==1?'pointer-events: none;opacity: 0.2;color:#FF4746;padding:0 8px;':'color:#FF4746;padding:0 8px;' "
                            v-permission="40"
                            @onClick="tabelDeletModelChange(row)">
                  删除
                </cus-button>
              </div>
            </template>
          </cusTable>
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <cus-page :data="pagesTwo"
                      class="mt_10"
                      @pageChange="getAbstractByTypeAndYearApi(1)"></cus-page>
          </div>
        </Tab-pane>
      </Tabs>

    </cus-allcard>

  </div>
</template>
<script>
import {
  getAbstractByTypeAndYear,
  getAccountBookListByUser,
  deleteAbstract
} from '@/api/businessAccountingApi/essentialInformationApi'
// import { store } from '/index'
// 表格修改功能
const editform = {
  subjectname: '', // 摘要名称
  subjecttype1: 0, // 摘要类别(默认0主体摘要,1分类摘要)
  subjectcode: '0', // 摘要编码
  isvalid: 1, // 是否在用(默认0否 1是)
  isInit: 1, // 死参 是否初始化( 0是 默认1否)
  accountbookId: 1 // 账簿id
}
// 外部新添摘要功能
const addform = {
  subjectname: '', // 摘要名称
  subjecttype1: 0, // 摘要类别(默认0主体摘要,1分类摘要)
  subjectcode: '1', // 摘要编码
  isvalid: 1, // 是否在用(默认0否 1是)
  isInit: 1, // 死参 是否初始化(0是 默认1否)
  accountbookId: 1 // 账簿id

}
export default {
  data () {
    return {
      tabsValue: 'nameOne',
      form: {
        loading: false,
        name: '',
        startTime: '',
        endTime: ''
      },
      subjecttype: 0, // 0经费账 1粮秣账
      accountbookId: 0, // 账簿id
      abstractid: 0, // 摘要id
      cityListOne: [], // 经费账-选择器-列表
      selectModelOne: -1, // 经费账-选择器-值
      dataOne: [], // 经费账-表格列表
      // 经费账-表头
      columnsOne: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          minWidth: 70
        },
        {
          title: '摘要代码',
          key: 'abstractcode',
          align: 'center',
          sortable: 'custom',
          minWidth: 100
        },
        {
          title: '摘要',
          key: 'abstractname',
          align: 'center',
          minWidth: 100
        },
        {
          title: '是否为初始化摘要',
          slot: 'isinit',
          align: 'center',
          sortable: 'custom',
          minWidth: 100
        },
        {
          title: '是否在用',
          slot: 'isvalid',
          align: 'center',
          sortable: 'custom',
          minWidth: 100
        },
        {
          title: '操作',
          fixed: 'right', // 右侧固定
          slot: 'operation',
          align: 'center',
          minWidth: 180
        }
      ],
      // 经费账-分页
      pagesOne: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      cityListTwo: [], // 经费账-选择器-列表
      selectModelTwo: -1, // 粮秣账-选择器-值
      dataTwo: [], // 粮秣账-表格列表
      // 粮秣账-表头
      columnsTwo: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          minWidth: 70
        },
        {
          title: '摘要代码',
          key: 'abstractcode',
          align: 'center',
          sortable: 'custom',
          minWidth: 100
        },
        {
          title: '摘要',
          key: 'abstractname',
          align: 'center',
          minWidth: 100
        },
        {
          title: '是否为初始化摘要',
          slot: 'isinit',
          align: 'center',
          sortable: 'custom',
          minWidth: 100
        },
        {
          title: '是否在用',
          slot: 'isvalid',
          align: 'center',
          sortable: 'custom',
          minWidth: 100
        },
        {
          title: '操作',
          fixed: 'right', // 右侧固定
          slot: 'operation',
          align: 'center',
          minWidth: 180
        }
      ],
      // 粮秣账-分页
      pagesTwo: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      order: null, //筛选条件 (排序字段,是否在用:isvalid,科目代码:subjectcode)
      asc: null, //(0:正序,1倒序)
      // 添加摘要表单
      addform: addform,
      // 表格修改摘要表单
      editform: editform,
      subjectid: 0, // 删除经费账粮秣账接口传参id

      isjiezhuanOne: 0, //是否结转下年，作用：添加科目按钮置灰
      isjiezhuanTwo: 0 //是否结转下年，作用：添加科目按钮置灰
    }
  },

  mounted () {
    console.log(1234);
    this.getAccountBookListByUserApi() // 根据用户id查询账簿-选择器使用
    this.getAbstractByTypeAndYearApi(this.subjecttype)// 刷新摘要列表查询// 默认查经费账     // 获取 经费账摘要 或 粮秣账摘要
  },
  activated () {
    this.getAccountBookListByUserApi() // 根据用户id查询账簿-选择器使用
    this.getAbstractByTypeAndYearApi(this.subjecttype)// 刷新摘要列表查询// 默认查经费账     // 获取 经费账摘要 或 粮秣账摘要
  },

  methods: {
    // 获取 经费账摘要 或 粮秣账摘要 接口
    getAbstractByTypeAndYearApi (ValuesubjectType) {
      let years
      let valueData
      if (ValuesubjectType === 0) { // 0经费账
        if (this.selectModelOne === -1) {
          years = ''
        } else {
          years = this.selectModelOne
        }
        valueData = {
          abstractType: ValuesubjectType, // 经费账、1粮秣账
          userid: this.vuex_user.base.id, // 用户id
          current: this.pagesOne.page,
          order: this.order,//(排序字段,是否在用:isvalid,科目代码:subjectcode)
          asc: this.asc,//(0:正序,1倒序)
          year: years,
          size: this.pagesOne.pageSize
        }
      } else { // 1粮秣账
        if (this.selectModelTwo === -1) {
          years = ''
        } else {
          years = this.selectModelTwo
        }
        valueData = {
          abstractType: ValuesubjectType, // 经费账、1粮秣账
          userid: this.vuex_user.base.id, // 用户id
          current: this.pagesTwo.page,
          order: this.order,//(排序字段,是否在用:isvalid,科目代码:subjectcode)
          asc: this.asc,//(0:正序,1倒序)
          year: years,
          size: this.pagesTwo.pageSize
        }
      }

      this.form.loading = true
      return new Promise(resolve => {
        getAbstractByTypeAndYear(valueData).then((res) => {
          this.form.loading = false
          if (res.errorcode === 0) {
            if (ValuesubjectType === 0) { // 0经费账
              this.dataOne = res.abstractlist
              this.pagesOne.pageTotal = res.totalcount
            } else {
              this.dataTwo = res.abstractlist
              this.pagesTwo.pageTotal = res.totalcount
            }

            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
        })
      })
    },
    // 根据用户id查询账簿-选择器使用 接口
    getAccountBookListByUserApi () {
      this.form.loading = true
      return new Promise((resolve) => {
        getAccountBookListByUser({
          userid: this.vuex_user.base.id // 用户id
        }).then((res) => {
          this.form.loading = false
          if (res.errorcode === 0) {
            res.accountbooklist.forEach(element => {
              element.value = element.year
              element.label = element.year
            })
            res.accountbooklist.unshift({ value: -1, label: '初始化数据' })
            this.cityListOne = res.accountbooklist
            if (this.cityListOne.length > 1) {
              this.selectModelOne = this.cityListOne[1].value
              this.accountbookId = this.cityListOne[1].accountbookId
            }
            this.cityListTwo = res.accountbooklist
            if (this.cityListTwo.length > 1) {
              this.selectModelTwo = this.cityListTwo[1].value
              this.accountbookId = this.cityListTwo[1].accountbookId
            }
            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
        })
      })
    },

    // 删除经费账摘要或粮秣账摘要 接口
    deleteAbstractApi () {
      return new Promise(resolve => {
        deleteAbstract({
          abstractid: this.abstractid, // 摘要id
          userid: this.vuex_user.base.id // 用户id
        }).then(res => {
          this.form.loading = false
          if (res.errorcode === 0) {
            this.$Message.success(res.resultmsg)
            this.pagesOne.page = 1
            this.pagesTwo.page = 1
            this.getAbstractByTypeAndYearApi(this.subjecttype)// 刷新摘要列表查询
            resolve()
          } else {
            this.$Message.error(res.resultmsg)
          }
        })
      })
    },

    // tabs标签页改变回调
    tabsValueChange (value) {
      if (value === 'nameOne') { // 经费账摘要
        this.subjecttype = 0 // 全局标明为经费账
        this.getAbstractByTypeAndYearApi(this.subjecttype)
      } else { // 粮秣账摘要
        this.subjecttype = 1// 全局标明为粮秣
        this.getAbstractByTypeAndYearApi(this.subjecttype)
      }
    },
    // 账簿年份改变回调
    selectModelChange (value) {
      if (value === 0) { // 0为经费账
        this.pagesOne.page = 1 // 经费账-分页-重置
        this.pagesOne.pageSize = 10// 经费账-分页-重置
        this.getAbstractByTypeAndYearApi(0)// 经费账摘要列表查询
        if (this.selectModelOne !== -1) {
          this.cityListOne.forEach(element => {
            if (element.value === this.selectModelOne) {
              this.addform.accountbookId = element.accountbookId// 添加摘要接口使用 账簿id
              this.editform.accountbookId = element.accountbookId// 修改摘要接口使用 账簿id、
              this.accountbookId = element.accountbookId// 跳转到添加页面用 账簿id
              this.isjiezhuanOne = element.isjiezhuan //是否结转下年，作用：添加科目按钮置灰
            }
          })
        }
      } else { // 1为经费账
        this.pagesTwo.page = 1 // 粮秣账-分页-重置
        this.pagesTwo.pageSize = 10// 粮秣账-分页-重置
        this.getAbstractByTypeAndYearApi(1)// 粮秣账摘要列表查询
        if (this.selectModelTwo !== -1) {
          this.cityListTwo.forEach(element => {
            if (element.value === this.selectModelTwo) {
              this.addform.accountbookId = element.accountbookId// 添加摘要接口使用 账簿id
              this.editform.accountbookId = element.accountbookId// 修改摘要接口使用 账簿id
              this.accountbookId = element.accountbookId// 跳转到添加页面用 账簿id
              this.isjiezhuanTwo = element.isjiezhuan //是否结转下年，作用：添加科目按钮置灰
            }
          })
        }
      }
    },

    // 表格修改摘要按钮
    tabelEditModelChange (valueData) {
      this.$router.push({
        path: '/view/supplierChangeAnalysis/accountBookMaintenance/grainAndFodderSubjectItem',
        query: {
          subjecttype: this.subjecttype, // 摘要类型(0经费账,1粮秣帐)
          accountbookId: this.accountbookId, // 跳转到添加页面用 账簿id
          addOrEidt: 'edit', // 区分时添加进来 还是修改进来 add/edit
          abstractname: valueData.abstractname, // 摘要名称
          abstractcode: valueData.abstractcode, // 摘要代码
          isvalid: valueData.isvalid, // 是否在用
          iszhineng: valueData.iszhineng, // 是否智能
          businesstype: valueData.businesstype, // 业务类型
          isInit: valueData.isinit // 是否初始化
        }
      })
    },
    // 表格删除摘要按钮
    tabelDeletModelChange (valueData) {
      this.$cu.dialog({ params: valueData }).then(({ abstractId }) => {
        this.abstractid = valueData.abstractId
        this.deleteAbstractApi()// 删除经费账摘要或粮秣账摘要 接口
      })
    },
    // 添加摘要按钮
    addAbstractButton () {
      this.$router.push({
        path: '/view/supplierChangeAnalysis/accountBookMaintenance/grainAndFodderSubjectItem',
        query: {
          subjecttype: this.subjecttype, // 摘要类型(0经费账,1粮秣帐)
          accountbookId: this.accountbookId, // 跳转到添加页面用 账簿id
          addOrEidt: 'add' // 区分时添加进来 还是修改进来 add/edit
        }
      })
    },
    // 点击筛选条件回调
    filterChange (value) {
      if (value.column.title == "摘要代码") {
        this.order = 'abstractcode' // 摘要代码
        this.asc = value.order == 'desc' ? 1 : 0
      } else if (value.column.title == "是否为初始化摘要") {
        this.order = 'isinit' // 是否为初始化摘要
        this.asc = value.order == 'desc' ? 1 : 0
      } else {
        this.order = 'isvalid' // 是否在用
        this.asc = value.order == 'desc' ? 0 : 1
      }
      this.getAbstractByTypeAndYearApi(this.subjecttype)// 刷新摘要列表查询// 默认查经费账     // 获取 经费账摘要 或 粮秣账摘要
    }
  }
}
</script>
<style lang="less" scoped>
.topBody {
  display: flex;
  margin-bottom: 20px;
  &-span {
    white-space: nowrap;
    line-height: 32px;
    width: 80px;
    text-align: right;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85) !important;
    margin-right: 10px;
  }
  &-selects {
    width: 200px;
    margin-right: 10px;
  }
}
</style>
